<template>
  <div>
    <van-nav-bar
      title="已完成待办"
      right-text="清空"
      left-arrow
      @click-left="() => router.go(-1)"
      @click-right="onClearall"
    />
    <div v-if="doneList.length > 0" class="list-wrapper">
      <div v-for="(v, i) in doneList" class="item" :key="v.createTime + v.key">
        <div class="content">{{v.content}}</div>
        <div class="footer">
          <div>
            <mini-btn>{{stopTimeFormat(v.stopTime)}}</mini-btn>
          </div>
          <mini-btn color="blue" @click="() => onRecall(i)">撤回</mini-btn>
        </div>
      </div>
    </div>
    <empty v-else>暂无完成待办~</empty>
  </div>
</template>

<script>
import { NavBar, Dialog } from 'vant'
import { useRouter } from 'vue-router'
import { computed } from 'vue'
import { useStore } from 'vuex'
import miniBtn from '@/components/mini-btn'
import { stopTimeFormat } from '@/utils/common'
import empty from '@/components/empty'
export default {
  components: {
    [NavBar.name]: NavBar,
    miniBtn,
    empty
  },
  setup(){
    const router = useRouter()
    const store = useStore()

    const doneList = computed(() => store.state.doneList)
    const onRecall = i => {
      store.commit('pushTodoItem', doneList.value[i])
      store.commit('removeDoneItem', i)
    }
    const onClearall = () => {
      if (doneList.value.length === 0) return false
      Dialog.confirm({
        title: '确认清空？',
        message: '清空后将无法恢复，请谨慎操作',
      }).then(() => {
        store.commit('clearDoneList')
      })
    }
    return {
      router,
      doneList,
      stopTimeFormat,
      onRecall,
      onClearall
    }
  }
}
</script>

<style lang="less" scoped>
.list-wrapper{
  .item{
    padding: .8rem;
    background-color: #fff;
    border-radius: @border-radius;
    margin: .8rem;
    box-shadow: @box-shadow;
    .footer{
      margin-top: .5rem;
      display: flex;
      justify-content: space-between;
    }
  }
  .content{
    text-decoration: line-through;
    color: #999;
  }
}
</style>